<template>
  <el-form ref="diagnosisForm" :model="form" class="diagnosis-form" :rules="rules">
    <!-- 诊断表格 -->
    <el-table
      :data="form.diagnosisList"
      border
      style="width: 100%; margin-bottom: 20px"
      :header-cell-style="{ background: '#f5f7fa', color: '#666' }"
    >
      <el-table-column prop="diagnosisType" label="出院诊断" min-width="380">
        <template #default="scope">
          <el-form-item :prop="`diagnosisList.${scope.$index}.diagnosisType`">
            <el-input v-model="scope.row.diagnosisType" placeholder="输入诊断类型" clearable />
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column prop="diseaseCode" label="疾病编码" width="160" align="center">
        <template #default="scope">
          <el-form-item :prop="`diagnosisList.${scope.$index}.diseaseCode`">
            <el-input v-model="scope.row.diseaseCode" placeholder="输入疾病编码" clearable />
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column label="入院病情" align="center">
        <el-table-column prop="admissionSituation.has" label="有" width="100" align="center">
          <template #default="scope">
            <el-form-item :prop="`diagnosisList.${scope.$index}.admissionSituation.has`">
              <el-checkbox
                v-model="scope.row.admissionSituation.has"
                @change="handleCheckboxChange(scope.row)"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column
          prop="admissionSituation.clinicalUndetermined"
          label="临床未确定"
          align="center"
          width="100"
        >
          <template #default="scope">
            <el-form-item
              :prop="`diagnosisList.${scope.$index}.admissionSituation.clinicalUndetermined`"
            >
              <el-checkbox
                v-model="scope.row.admissionSituation.clinicalUndetermined"
                @change="handleCheckboxChange(scope.row)"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column
          prop="admissionSituation.unknown"
          label="情况不明"
          width="100"
          align="center"
        >
          <template #default="scope">
            <el-form-item :prop="`diagnosisList.${scope.$index}.admissionSituation.unknown`">
              <el-checkbox
                v-model="scope.row.admissionSituation.unknown"
                @change="handleCheckboxChange(scope.row)"
              />
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column prop="admissionSituation.none" label="无" width="120" align="center">
          <template #default="scope">
            <el-form-item :prop="`diagnosisList.${scope.$index}.admissionSituation.none`">
              <el-checkbox
                v-model="scope.row.admissionSituation.none"
                @change="handleCheckboxChange(scope.row)"
              />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column prop="dischargeSituation" label="出院情况" width="100" align="center">
        <template #default="scope">
          <el-form-item :prop="`diagnosisList.${scope.$index}.dischargeSituation`">
            <el-input v-model="scope.row.dischargeSituation" placeholder="输入出院情况" clearable />
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>

    <!-- 操作按钮 -->
    <div style="text-align: right">
      <el-button type="primary" @click="handleSubmit"> 提交 </el-button>
      <el-button @click="handleReset"> 重置 </el-button>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import {
  ElForm,
  ElFormItem,
  ElTable,
  ElTableColumn,
  ElInput,
  ElCheckbox,
  ElButton,
  FormRules
} from 'element-plus'

// 表单数据结构
const form = reactive({
  diagnosisList: [
    {
      diagnosisType: '主要诊断: 重症肺炎',
      diseaseCode: 'J18.903',
      admissionSituation: {
        has: false,
        clinicalUndetermined: false,
        unknown: false,
        none: false
      },
      dischargeSituation: '其他'
    },
    {
      diagnosisType: '次要诊断: 慢性阻塞性肺病伴有急性加重',
      diseaseCode: 'J44.000',
      admissionSituation: {
        has: false,
        clinicalUndetermined: false,
        unknown: false,
        none: false
      },
      dischargeSituation: '其他'
    },
    {
      diagnosisType: 'Ⅱ型呼吸衰竭',
      diseaseCode: 'J96.900x003',
      admissionSituation: {
        has: false,
        clinicalUndetermined: false,
        unknown: false,
        none: false
      },
      dischargeSituation: '其他'
    },
    {
      diagnosisType: '气胸（左侧）',
      diseaseCode: 'J93.900',
      admissionSituation: {
        has: false,
        clinicalUndetermined: false,
        unknown: false,
        none: false
      },
      dischargeSituation: '其他'
    },
    {
      diagnosisType: '肺性脑病',
      diseaseCode: 'G93.101',
      admissionSituation: {
        has: false,
        clinicalUndetermined: false,
        unknown: false,
        none: false
      },
      dischargeSituation: '其他'
    },
    {
      diagnosisType: '血胸（双侧）',
      diseaseCode: 'J94.200',
      admissionSituation: {
        has: false,
        clinicalUndetermined: false,
        unknown: false,
        none: false
      },
      dischargeSituation: '其他'
    }
  ]
})

// 表单校验规则
const rules = reactive<FormRules>({
  // 诊断列表校验（可扩展）
  diagnosisList: [
    {
      validator: (rule, value, callback) => {
        if (value.some((item: any) => !item.diagnosisType.trim())) {
          callback(new Error('出院诊断不能为空'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
})

// 表单引用
const diagnosisForm = ref<InstanceType<typeof ElForm>>()

// 复选框互斥逻辑
const handleCheckboxChange = (row: any) => {
  const keys = Object.keys(row.admissionSituation) as (keyof typeof row.admissionSituation)[]
  keys.forEach((key) => {
    if (key !== 'none' && row.admissionSituation[key]) {
      row.admissionSituation.none = false
    }
    if (key === 'none' && row.admissionSituation[key]) {
      keys.forEach((k) => {
        if (k !== 'none') row.admissionSituation[k] = false
      })
    }
  })
}

// 提交表单
const handleSubmit = () => {
  diagnosisForm.value?.validate((valid) => {
    if (valid) {
      // 这里可替换为实际的接口请求
      console.log('表单校验通过，提交数据：', form)
      // 示例：axios.post('/api/submit', form)
    } else {
      console.log('表单校验失败')
    }
  })
}

// 重置表单
const handleReset = () => {
  diagnosisForm.value?.resetFields()
  // 重置复选框状态（如果需要）
  form.diagnosisList.forEach((item) => {
    item.admissionSituation.has = false
    item.admissionSituation.clinicalUndetermined = false
    item.admissionSituation.unknown = false
    item.admissionSituation.none = false
  })
}
</script>

<style scoped>
.diagnosis-form {
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-table {
  --el-table-header-text-color: #666;
}

.el-table th {
  background-color: #f5f7fa !important;
}
</style>
